<template>
  <div>
    <!-- 发起人设置 -->
    <a-drawer
      :destroy-on-close="true"
      title="发起人"
      placement="right"
      :width="550"
      :closable="false"
      :visible="show"
      @close="onClose"
      @ok="onOk"
    >
      <div class="draw-right">
        <a-tabs default-active-key="1">
          <a-tab-pane key="1" tab="设置发起人">
            <div class="start-box">
              <div v-if="startOptions.props" class="chosed-user mg_b10">
                {{ startOptions.props }}
              </div>
              <a-button type="primary" sise="small" @click="addUser">
                添加/修改发起人
              </a-button>
            </div>
          </a-tab-pane>
          <a-tab-pane key="2" tab="表单操作权限">
            <div class="form-body">
              <a-row v-for="(fs, idx) in startOptions.formSetting" :key="idx" class="header" type="flex">
                <a-col class="header-left">{{ fs.flowFormName ? fs.flowFormName : fs.label }}</a-col>
                <a-col>
                  <div>
                    <a-radio-group v-model="fs.type">
                      <a-radio value="edit">可编辑</a-radio>
                      <a-radio value="read">只读</a-radio>
                      <a-radio value="hide">隐藏</a-radio>
                    </a-radio-group>
                  </div>
                </a-col>
              </a-row>
            </div>
          </a-tab-pane>
        </a-tabs>
      </div>
      <div class="draw-foot">
        <a-button style="margin-right: 8px" @click="onClose">取消</a-button>
        <a-button type="primary" @click="onOk">确认</a-button>
      </div>
    </a-drawer>
    <employee-select :show.sync="visible" :default-selected-keys="defaultKeys" title="选择发起人" @change="onEmployeeChange" />
  </div>
</template>

<script>
import EmployeeSelect from "@/components/EmployeeSelect2/employeeSelect7";
import { isJson } from "@/utils/index";

export default {
  name: "StartDrawer",
  components: {
    EmployeeSelect
  },
  props: {
    startOptions: {
      type: Object,
      default: () => {}
    },
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      visible: false,
      choseEmployees: [],
      defaultKeys: [],
      copyStartoptions: {},
      options: null
    };
  },

  watch: {
    show(val) {
      if (val) {
        this.copyStartoptions = JSON.parse(JSON.stringify(this.startOptions));
        this.initOptions(this.startOptions);
      }
    }
  },
  created() {
    this.initOptions(this.startOptions);
  },

  methods: {
    initOptions(val) {
      this.options = Object.assign({}, val, {
        props: isJson(val.props) ? JSON.parse(val.props) : val.props
      });
      if (this.options.limitUser) {
        this.defaultKeys = this.options.limitUser.split(",");
      }
    },
    onEmployeeChange(data) {
      this.choseEmployees = data;
      this.defaultKeys = data.map(i => i.id);
      this.startOptions.limitUser = this.choseEmployees.map(item => item.id).toString();
      this.startOptions.props = this.choseEmployees.map(item => item.name).toString();
      this.$emit("change", this.startOptions);
    },
    onOk() {
      // 最后确认
      this.startOptions.limitUser = this.choseEmployees.map(item => item.id).toString();
      this.startOptions.props = this.choseEmployees.map(item => item.name).toString();
      this.$emit("change", this.startOptions);
      this.$emit("update:show", false);
    },
    onClose() {
      // 关闭抽屉
      this.$emit("update:show", false);
      this.$emit("change", this.copyStartoptions);
    },
    addUser() {
      // 添发起人
      this.visible = true;
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../../styles/startDrawer.scss";
</style>
